<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>维权进度追踪与通知</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #eaf7e4; /* 浅绿色背景 */
            color: #333; /* 深灰色文字 */
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4caf50; /* 深绿色头部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
        }

        section {
            margin: 20px;
        }

        .progress-container {
            background-color: #dff0d8; /* 淡绿色进度容器背景 */
            padding: 20px;
            border-radius: 10px;
        }

        .progress-item {
            margin-bottom: 15px;
        }

        footer {
            background-color: #4caf50; /* 深绿色底部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.7.1.js"></script>
    
    <script type="text/javascript">
    $.ajax({
    	url:"/consumer/trackClaim",
    	type:"GET",
    	data:{
    		date: new Date()
    	},
    	error: function (){
    		console.log("失败");
    	},
    	success: function (data){
    		console.log("成功");
    		console.log("data=" +data.status);
    		console.log("data=" +data.result);
    		console.log("data=" +data.reviewStatus);
    		$("#btn1").val(data.status)
    		$("#btn2").val(data.reviewStatus)
    		$("#btn3").val(data.result)
                // $("#progress-item").html('<strong>申请状态：</strong>' + data.status + '<br>' + '<strong>审核状态：</strong>'+data.reviewStatus + '<br>'+'<strong>处理结果：</strong>'+data.result+'<hr/>');
    		 
    	}
    })
    </script>
<body>
    <header>
        <h1>维权进度追踪通知</h1>
    </header>

    <section>
        <div class="progress-container" id="container">
        	<div id="progress-item">
        	    <!-- 申请状态 -->
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">申请状态：</label>
            <div class="layui-input-block">
                <input id="btn1" type="text" class="layui-input" value="目前无申请" readonly>
            </div>
        </div>
    </div>

    <!-- 审核状态 -->
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">审核状态：</label>
            <div class="layui-input-block">
                <input id="btn2" type="text" class="layui-input" value="目前无审核" readonly>
            </div>
        </div>
    </div>

    <!-- 处理结果 -->
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">处理结果：</label>
            <div class="layui-input-block">
                <input id="btn3" type="text" class="layui-input" value=""目前无处理结果" readonly>
            </div>
        </div>
    </div>
        	</div>
        </div>
                <div class="layui-progress layui-progress-big">
  			<div class="layui-progress-bar" lay-percent="20%"></div>
		</div>
    </section>

</body>

</html>